<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料-掘金</title>
    <link rel="icon" href="../img/juejinlogo.svg">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../fontawesome/css/all.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/mesChange.css">
    <script src="../js/mesChange.js"></script>
    <script src="https://unpkg.com//axios@0.27.2/dist/axios.min.js"></script>
    <script src="../js/header.js"></script>

</head>

<body>
    <!-- 最顶部导航栏 -->
    <div class="headerContainer">
        <header>
            <div class="leftPart">
                <!-- 稀土掘金的图标 -->
                <div class="logo">
                    <img src="../img/logo.svg" alt="">
                </div>

                <!-- 目录 -->
                <ul class="headerTitle">
                    <li>首页</li>
                    <li>沸点</li>
                    <li>课程</li>
                    <li>直播</li>
                    <li>活动</li>
                    <li>商城</li>
                    <li>APP</li>
                    <li>插件</li>
                </ul>
            </div>

            <div class="rightPart">
                <!-- 搜索框 -->
                <div class="searchContainer">
                    <!-- 搜索框 -->
                    <input id="searchBox" type="text" placeholder="探索稀土掘金">
                    <!-- 展示的下拉列表 -->
                    <ul class="listBox" id="listBox"></ul>
                    <!-- 查询图标 -->
                    <div class="searchIcon">
                        <div class="fas fa-search"></div>
                    </div>
                </div>

                <!-- 创作者中心 -->
                <div class="createCenter">
                    <p>创作者中心</p>
                    <div class="more"></div>
                </div>

                <!-- 会员 -->
                <div class="vip">
                    <img src="../img/vip.svg" alt="">
                    <p>会员</p>
                </div>

                <!-- 用户已登录 -->
                <div class="userIn">
                    <div class="fas fa-bell"></div>
                    <div class="userPhoto">
                        <img id="avatar" alt="">
                    </div>
                    <!-- 隐藏的功能菜单 -->
                    <div class="hiddenFun">
                        <ul class="funList">
                            <li class="goNotes">
                                <img src="../img/写文章.png" alt="">
                                <p>写文章</p>
                            </li>
                            <li>
                                <img src="../img/草稿箱.png" alt="">
                                <p>草稿箱</p>
                            </li>
                        </ul>
                        <ul class="funList">
                            <li class="goUserMes">
                                <img src="../img/我的主页.png" alt="">
                                <p>我的主页</p>
                            </li>
                            <li>
                                <img src="../img/我赞过的.png" alt="">
                                <p>我赞过的</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/我的课程.png" alt="">
                                <p>我的课程</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/我的优惠劵.png" alt="">
                                <p>我的优惠劵</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/掘金会员.png" alt="">
                                <p>掘金会员</p>
                            </li>
                            <li>
                                <img src="../img/我的收藏.png" alt="">
                                <p>我的收藏</p>
                            </li>
                            <li>
                                <img src="../img/成长福利.png" alt="">
                                <p>成长福利</p>
                            </li>
                            <li>
                                <img src="../img/标签管理.png" alt="">
                                <p>标签管理</p>
                            </li>
                            <li class="smaller">
                                <img src="../img/浏览记录.png" alt="">
                                <p>浏览记录</p>
                            </li>
                            <li>
                                <img src="../img/我的报名.png" alt="">
                                <p>我的报名</p>
                            </li>
                        </ul>
                        <ul class="funList">
                            <li>
                                <img src="../img/设置.png" alt="">
                                <p>设置</p>
                            </li>
                            <li>
                                <img src="../img/关于.png" alt="">
                                <p>关于</p>
                            </li>
                        </ul>
                        <ul class="funList">
                            <li class="exit">
                                <img src="../img/退出.png" alt="">
                                <p>退出</p>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 用户未登录 -->
                <button class="userOut">登录</button>

                <!-- 登录界面 -->
                <div class="loginBlock">
                    <!-- 遮罩层 -->
                    <div class="overlay">
                        <!-- 登录注册块 -->
                        <div class="loginBox">
                            <!-- 选择功能 -->
                            <div class="funSelect">
                                <div class="loginFun">
                                    <img src="../img/openEye.svg" alt="">
                                    <p>登录</p>
                                </div>
                                <div class="registerFun">
                                    <img src="../img/openEye.svg" alt="">
                                    <p>注册</p>
                                </div>
                            </div>

                            <!-- 关闭 -->
                            <div class="close">
                                <div class="fas fa-times"></div>
                            </div>

                            <!-- 不同输入状态时显示不同的图片 -->
                            <div class="inputState">
                                <img src="../img/openEye.svg" alt="">
                            </div>

                            <!-- 不同身份时选择登录或者注册的界面 -->
                            <ul class="interface">
                                <!-- 登录界面 -->
                                <li class="login">
                                    <form class="type" id="login" action="">
                                        <input class="userName" id="loginName" type="text" autocomplete="off"
                                            placeholder="请输入您的用户名">
                                        <input class="userPassword" id="loginPassword" type="password"
                                            autocomplete="off" placeholder="请输入您的密码">
                                        <input class="userBtn" id="loginBtn" type="button" autocomplete="off"
                                            value="登录">
                                        <div class="otherFunc">
                                            <p>没有账号？<span class="go">去注册</span></p>
                                            <div class="checkbox">
                                                <input type="checkbox" autocomplete="off">
                                                <p>记住我</p>
                                                <div class="fas fa-question-circle"></div>
                                                <span class="loginFree">七天免登录</span>
                                            </div>
                                        </div>
                                        <p class="warning">注册登录即表示同意<span>用户协议 、 隐私政策</span></p>
                                    </form>
                                </li>
                                <!-- 普通用户的注册界面 -->
                                <li class="register">
                                    <form class="type" id="register" action="">
                                        <input class="userName" id="registerName" type="text" autocomplete="off"
                                            placeholder="请输入5-12位的用户名">
                                        <input class="userPassword" id="registerPassword" type="password"
                                            autocomplete="off" placeholder="请输入8位以上含数字英文的密码">
                                        <input class="userBtn" id="registerBtn" type="button" autocomplete="off"
                                            value="普通用户注册">
                                        <div class="otherFunc">
                                            <p>已有账号？<span class="go">去登录</span></p>
                                        </div>
                                        <p class="warning">注册登录即表示同意<span>用户协议 、 隐私政策</span></p>
                                    </form>
                                </li>
                                <!-- 管理员注册界面 -->
                                <li id="hidden">
                                    <form class="type" id="register0" action="">
                                        <input class="userName" id="registerName0" type="text" autocomplete="off"
                                            placeholder="请输入5-12位的用户名">
                                        <input class="userPassword" id="registerPassword0" type="password"
                                            autocomplete="off" placeholder="请输入8位以上含数字英文的密码">
                                        <input class="userBtn" id="registerBtn0" type="button" autocomplete="off"
                                            value="管理员注册">
                                    </form>
                                </li>
                            </ul>

                            <!-- 管理员注册的隐藏按钮 -->
                            <div class="hiddenDot"></div>

                            <!-- 消息提示 -->
                            <ul class="message">
                                <li>登录成功！稀土掘金欢迎您！</li>
                                <li>登录失败！请重新输入用户名和密码！</li>
                                <li>注册成功！请返回登录页登录！</li>
                                <li>注册失败！用户名已存在！</li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

        </header>
    </div>

    <!-- 返回个人主页 -->
    <div class="backContain">
        <nav class="back">
            <img src="../img/left-arrow.png" alt="">
            <p>返回个人主页</p>
        </nav>
    </div>

    <div class="main">
        <!-- 右侧个人信息修改选项 -->
        <ul class="select">
            <li class="item">
                <div class="fas fa-id-card"></div>
                <p>个人资料</p>
            </li>
            <li class="item">
                <div class="fas fa-cog"></div>
                <p>账号设置</p>
            </li>
            <li class="item">
                <div class="fas fa-file"></div>
                <p>简历管理</p>
            </li>
            <li class="item">
                <div class="fas fa-ban"></div>
                <p>屏蔽管理</p>
            </li>
        </ul>

        <!-- 主体部分 -->
        <section>
            <!-- 个人资料 -->
            <div class="personal">
                <title>个人资料</title>
                <div class="personalContent">
                    <ul>
                        <li>
                            <p>用户名</p>
                            <div class="outer">
                                <input id="changeName" type="text" placeholder="用户名" autocomplete="off" disabled>
                                <span>0/20</span>
                            </div>

                        </li>
                        <li>
                            <p>职位</p>
                            <div class="outer">
                                <input id="changeJob" type="text" placeholder="填写你的职位" autocomplete="off">
                                <span>0/50</span>
                            </div>

                        </li>
                        <li>
                            <p>公司</p>
                            <div class="outer">
                                <input id="changeCompany" type="text" placeholder="填写你的公司" autocomplete="off">
                                <span>0/50</span>
                            </div>

                        </li>
                        <li>
                            <p>个人主页</p>
                            <div class="outer">
                                <input id="changePage" type="text" placeholder="填写你的个人主页" autocomplete="off">
                                <span>0/100</span>
                            </div>

                        </li>
                        <li class="selfIntro">
                            <p>个人介绍</p>
                            <div class="outer">
                                <textarea name="" id="selfIntro" cols="30" rows="10"
                                    placeholder="填写职业技能、擅长的事情、喜欢的事情等"></textarea>
                                <span>0/100</span>
                            </div>
                        </li>
                        <button class="saveInformationBtn">保存修改</button>
                    </ul>


                    <!-- 我的头像 -->
                    <div class="myAvatar">
                        <div>
                            <input type="file" id="changeAvatar" accept="image/jpg,image/jpeg,image/png" />
                            <img id="mesAvatar" alt="">
                        </div>
                        <p>我的头像</p>
                        <p>支持 jpg、png、jpeg 格式大小 5M 以内的图片</p>
                    </div>
                </div>
            </div>

            <!-- 账号设置 -->
            <div class="account">
                <title>账号设置</title>
                <ul>
                    <li class="item">
                        <p>手机</p>
                        <ul>
                            <li>13*****6529</li>
                            <li>换绑</li>
                        </ul>
                    </li>
                    <li class="item">
                        <p>微信</p>
                        <ul>
                            <li>家园</li>
                            <li>解绑</li>
                        </ul>
                    </li>
                    <li class="item">
                        <p>新浪微博</p>
                        <ul>
                            <li>未绑定</li>
                            <li>绑定</li>
                        </ul>
                    </li>
                    <li class="item">
                        <p>Github</p>
                        <ul>
                            <li>未绑定</li>
                            <li>绑定</li>
                        </ul>
                    </li>
                    <li class="item">
                        <p>密码</p>
                        <ul>
                            <li></li>
                            <li>重置</li>
                        </ul>
                    </li>
                    <li class="item">
                        <p>账号注销</p>
                        <ul>
                            <li></li>
                            <li>注销</li>
                        </ul>
                    </li>
                </ul>
            </div>

            <!-- 简历管理 -->
            <div class="resume">
                <div class="titleContainer">
                    <title>简历管理</title>
                    <div>
                        <p>仅支持pdf格式，文件大小需小于10M</p>
                        <button>上传简历</button>
                    </div>
                </div>
                <div class="imgContainer">
                    <img src="../img/file.svg" alt="">
                    <span>暂无简历</span>
                </div>
            </div>

            <!-- 屏蔽管理 -->
            <div class="shield">
                <!-- 标题的列表 -->
                <ul class="shieldTitle">
                    <li>屏蔽作者</li>
                    <li>屏蔽标签</li>
                </ul>
                <!-- 列表所对应的内容 -->
                <ul class="shieldInner">
                    <!-- 屏蔽作者部分的内容 -->
                    <li class="shieldWriter">
                        <div class="shieldWriterTitle">
                            <p>文章</p>
                            <p>沸点</p>
                        </div>

                        <div class="articleInner sameType">
                            <img src="../img/bluePerson.svg" alt="">
                            <p>您当前尚未屏蔽任何作者~</p>
                            <button>去首页逛逛</button>
                        </div>

                        <div class="boilInner sameType">
                            <img src="../img/bluePerson.svg" alt="">
                            <p>您当前尚未屏蔽沸点作者~</p>
                            <button>去沸点逛逛</button>
                        </div>

                    </li>

                    <!-- 屏蔽标签部分的内容 -->
                    <li class="shieldLabel">
                        <div class="labelInner sameType">
                            <img src="../img/bluePerson.svg" alt="">
                            <p>您当前尚未屏蔽任何标签~</p>
                            <button>去首页逛逛</button>
                        </div>
                    </li>
                </ul>

            </div>
        </section>

    </div>
</body>

</html>